<template>
  <div class="p-2">
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-card class="box-card">
          <template #header>
            <div class="clearfix">
              <span>基本信息</span>
            </div>
          </template>
          <div>
            <!-- <div class="text-center">
              <userAvatar />
            </div> -->
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />用户名称
                <div class="pull-right">{{ state.user.userName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />手机号码
                <div class="pull-right">{{ state.user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />创建日期
                <div class="pull-right">{{ state.user.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12" :xs="24">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>修改密码</span>
            </div>
          </template>
          <resetPwd />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12" :xs="24" style="text-align: center">
        <el-card>
          <el-button v-if="roles.some((role) => role.startsWith('store_assistant'))" type="info" @click="refund">退款申请</el-button>
          <el-button v-if="roles.some((role) => role.startsWith('agent_mr'))" type="info" @click="refund">医代申请退款</el-button>
          <el-button type="danger" @click="logout">退出登录</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Profile" lang="ts">
import UserAvatar from './userAvatar.vue';
import UserInfo from './userInfo.vue';
import ResetPwd from './resetPwd.vue';
import ThirdParty from './thirdParty.vue';
import OnlineDevice from './onlineDevice.vue';
import useUserStore from '@/store/modules/user';
import { getAuthList } from '@/api/system/social/auth';
import { getUserProfile } from '@/api/system/user';
import { getOnline } from '@/api/monitor/online';
import { UserVO } from '@/api/system/user/types';
import { refundApply } from '@/api/business/refund';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const activeTab = ref('userinfo');
const userStore = useUserStore();

interface State {
  user: Partial<UserVO>;
  roleGroup: string;
  postGroup: string;
  auths: any;
  devices: any;
}
const state = ref<State>({
  user: {},
  roleGroup: '',
  postGroup: '',
  auths: [],
  devices: []
});

const { roles } = useUserStore();

const userForm = ref({});

const getUser = async () => {
  const res = await getUserProfile();
  state.value.user = res.data.user;
  userForm.value = { ...res.data.user };
  state.value.roleGroup = res.data.roleGroup;
  state.value.postGroup = res.data.postGroup;
};

const getAuths = async () => {
  const res = await getAuthList();
  state.value.auths = res.data;
};
const getOnlines = async () => {
  const res = await getOnline();
  state.value.devices = res.rows;
};

const logout = async () => {
  await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  });
  await userStore.logout();
  location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
};

const refund = async () => {
  await ElMessageBox.confirm('确定申请退款吗？提交申请后将会暂时冻结您的相关使用，并等待审核人员处理', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  });
  await refundApply();
  proxy?.$modal.msgSuccess('申请退款已提交，请您耐心等待审核结果，如有任何疑问请联系客服咨询');
};

onMounted(() => {
  getUser();
  getAuths();
  getOnlines();
});
</script>
